<template>
  <div class="UnionList">
    <el-card>
      <h3><span class="tag"></span> 工会列表</h3>
      <div class="searchBox">
        <span class="txt">工会名称：</span>
        <el-input
          v-model="name"
          clearable
          size="small"
          placeholder="请输入工会名称"
        ></el-input>
        <span class="margin"></span>
        <span class="txt">工会编号：</span>
        <el-input
          v-model="index"
          clearable
          size="small"
          placeholder="请输入工会编号"
        ></el-input>
        <span class="margin"></span>
        <span class="txt">负责人手机号：</span>
        <el-input
          v-model="phone"
          clearable
          size="small"
          placeholder="请输入负责人手机号"
        ></el-input>
        <span class="margin"></span>
        <span class="txt">签约时间：</span>
        <el-date-picker
          size="small"
          v-model="timeArr"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="timeOptions"
          value-format="yyyy-MM-dd"
          @change="focusA"
        >
        </el-date-picker>
        <el-button
          class="btn"
          icon="el-icon-search"
          size="small"
          @click="search"
          >搜索</el-button
        >
        <el-button icon="el-icon-circle-plus-outline" size="small" @click="add"
          >新增工会</el-button
        >
      </div>
      <el-table
        v-loading="loading"
        :data="tableData"
        style="width: 100%; margin-top: 10px"
        :header-cell-style="{ background: '#f5f7fa' }"
        @selection-change="handleSelectionChange"
      >
        <template slot="empty">
          <el-empty :image-size="200"></el-empty>
        </template>
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="id" label="工会编号" width="100px">
        </el-table-column>
        <el-table-column prop="create_time" label="加入日期"> </el-table-column>
        <el-table-column prop="name" label="工会名称"> </el-table-column>
        <el-table-column prop="leader" label="负责人"> </el-table-column>
        <el-table-column prop="phone" label="联系方式"> </el-table-column>
        <el-table-column prop="anchor_num" label="主播数量"> </el-table-column>
        <el-table-column prop="ratio" label="分成比例"> </el-table-column>
        <el-table-column prop="tax_rate" label="结算税率"> </el-table-column>
        <el-table-column prop="type" label="结算方式"> </el-table-column>
        <el-table-column prop="diamond_num" label="工会宝石收益数">
        </el-table-column>
        <el-table-column prop="address" label="详情">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="small"
              plain
              @click="look(scope.row)"
              >查看</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <br />
      <el-button size="small" class="btn plcz" @click="exportExcel"
        >导出工会信息</el-button
      >
      <pagination
        :total="total"
        :page.sync="page"
        :limit.sync="pageSize"
        @pagination="getList"
      />
    </el-card>
    <el-dialog
      @close="close"
      title="新增工会"
      :visible.sync="show"
      width="30%"
      center
    >
      <el-form
        :rules="rules"
        ref="form"
        label-position="right"
        label-width="120px"
        :model="form"
      >
        <el-form-item prop="name" label="工会名称">
          <el-input
            v-model="form.name"
            clearable
            size="small"
            placeholder="请输入工会名称"
          ></el-input>
        </el-form-item>
        <el-form-item prop="leader" label="负责人">
          <el-input
            v-model="form.leader"
            clearable
            size="small"
            placeholder="请输入工会负责人"
          ></el-input>
        </el-form-item>
        <el-form-item prop="phone" label="联系方式">
          <el-input
            v-model="form.phone"
            clearable
            size="small"
            placeholder="请输入联系方式"
          ></el-input>
        </el-form-item>
        <el-form-item prop="ratio" label="分成比例">
          <el-input
            v-model="form.ratio"
            clearable
            style="width: 95%"
            size="small"
            placeholder="请输入分成比例"
          ></el-input
          >%
        </el-form-item>
        <el-form-item prop="tax_rate" label="结算税率">
          <el-input
            v-model="form.tax_rate"
            clearable
            style="width: 95%"
            size="small"
            placeholder="请输入分成比例"
          ></el-input>
          %
        </el-form-item>
        <el-form-item prop="type" label="结算方式">
          <!-- <el-radio-group v-model="form.paymentType">
            <el-radio label="1">日结</el-radio>
            <el-radio label="2">月结</el-radio>
          </el-radio-group> -->
          <el-select v-model="form.type" size="small" placeholder="请选择">
            <el-option label="日结" value="1"> </el-option>
            <el-option label="月结" value="2"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          prop="settlement_time"
          :required="form.type == 2 ? true : false"
          v-if="form.type == 2"
          label="结算日期"
        >
          <el-select
            v-model="form.settlement_time"
            size="small"
            placeholder="请选择"
          >
            <el-option
              v-for="item in 30"
              :key="item"
              :label="'每月' + item + '号'"
              :value="item + ''"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="account" label="工会账号后台">
          <el-input
            v-model="form.account"
            clearable
            size="small"
            placeholder="请输入工会账号后台"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password" label="工会后台密码">
          <el-input
            v-model="form.password"
            clearable
            size="small"
            placeholder="请输入工会后台密码"
          ></el-input>
        </el-form-item>
        <el-form-item prop="bank_card_number" label="银行卡号">
          <el-input
            v-model.number="form.bank_card_number"
            clearable
            size="small"
            placeholder="请输入银行卡号"
          ></el-input>
        </el-form-item>
        <el-form-item prop="bank_name" label="开户行">
          <el-input
            v-model="form.bank_name"
            clearable
            size="small"
            placeholder="请输入开户行名称"
          ></el-input>
        </el-form-item>
        <el-form-item prop="reserved_name" label="银行预留姓名">
          <el-input
            v-model="form.reserved_name"
            clearable
            size="small"
            placeholder="请输入银行预留姓名"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="show = false">取 消</el-button>
        <el-button size="small" class="btn" type="primary" @click="addSubmit"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination"; // 分页
import { AdminUnionList, AdminUnionAddUnion } from "@/api/UnionManagement";
import moment from "moment";
export default {
  components: { Pagination },
  data() {
    return {
      timeArr: [],
      startDate: "",
      endDate: "",
      name: "",
      index: "",
      phone: "",
      tableData: [],
      total: 0,
      page: 1,
      pageSize: 10,
      multipleSelection: [],
      show: false,
      auto: 1, //人工审核1开启2关闭
      form: {
        name: "",
        leader: "",
        phone: "",
        ratio: "",
        tax_rate: "",
        type: "",
        settlement_time: "",
        account: "",
        password: "",
        bank_card_number: "",
        bank_name: "",
        reserved_name: "",
      },
      timeOptions: {
        disabledDate(platformValue) {
          return platformValue.getTime() > Date.now() - 8.64e6;
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      loading: false,
      rules: {
        name: [
          { required: true, message: "请输入公会名称", trigger: "change" },
        ],
        leader: [
          { required: true, message: "请输入负责人", trigger: "change" },
        ],
        phone: [
          { required: true, message: "请输入联系方式", trigger: "change" },
        ],
        ratio: [
          { required: true, message: "请输入分成比例", trigger: "change" },
        ],
        tax_rate: [
          { required: true, message: "请输入结算税率", trigger: "change" },
        ],
        account: [
          { required: true, message: "请输入公会账号", trigger: "change" },
        ],
        type: [
          { required: true, message: "请选择结算方式", trigger: "change" },
        ],
        password: [
          {
            required: true,
            message: "请输入公会密码",
            trigger: "change",
          },
          {
            pattern:
              /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_]+$)(?![a-z0-9]+$)(?![a-z\W_]+$)(?![0-9\W_]+$)[a-zA-Z0-9\W_]{6,16}$/,
            message:
              "密码为数字，小写字母，大写字母，特殊符号 至少包含三种，长度为 6 - 16位",
            trigger: "change",
          },
        ],
        bank_card_number: [
          {
            required: true,
            message: "请输入银行卡号",
            trigger: "change",
          },
          { type: "number", message: "银行卡必须为数字值" },
        ],
        bank_name: [
          { required: true, message: "请输入开户行", trigger: "change" },
        ],
        reserved_name: [
          { required: true, message: "请输入银行预留姓名", trigger: "change" },
        ],
      },
    };
  },
  methods: {
    //选着时间
    focusA(time) {
      if (!this.timeArr) {
        this.timeArr = [];
      }
      this.startDate = this.timeArr[0];
      this.endDate = this.timeArr[1];
    },
    //选择表格
    handleSelectionChange(value) {
      this.multipleSelection = value;
    },
    add(obj) {
      this.show = true;
    },
    //通过
    look(obj) {
      this.$router.push({
        path: "/UnionManagement/UnionDetails",
        query: {
          id: obj.id,
        },
      });
    },
    async getList() {
      this.loading = true;
      const res = await AdminUnionList({
        page: this.page,
        pageSize: this.pageSize,
        startTime: this.startDate,
        endTime: this.endDate,
        phone: this.phone,
        name: this.name,
        id: this.index,
      });
      this.loading = false;
      if (res.code == 0) {
        this.total = parseInt(res.data.total);
        this.tableData = res.data.list;
        this.tableData.forEach((item) => {
          item.create_time = moment(item.create_time * 1000).format(
            "YYYY-MM-DD hh:mm:ss"
          );
        });
      }
    },
    search() {
      this.page = 1;
      this.getList();
    },
    //添加公会
    addSubmit() {
      this.$refs.form.validate().then(async () => {
        const res = await AdminUnionAddUnion(this.form);
        if (res.code == 0) {
          this.$message.success("新增成功！");
          this.getList();
          this.show = false;
        }
      });
    },
    close() {
      this.$refs.form.resetFields();
    },
    //导出
    exportExcel() {
      if (this.multipleSelection.length == 0) {
        return this.$message.error("请选择公会！");
      }
      const head = [
        "工会编号",
        "加入日期",
        "工会名称",
        "负责人",
        "联系方式",
        "主播数量",
        "分成比例",
        "结算税率",
        "结算方式",
        "工会宝石收益数",
      ];
      const filter = [
        "id",
        "create_time",
        "name",
        "leader",
        "phone",
        "anchor_num",
        "ratio",
        "tax_rate",
        "type",
        "diamond_num",
      ];
      this.$excel(this.multipleSelection, head, filter, "公会列表");
    },
  },
  created() {
    this.getList();
  },
};
</script>

<style lang="less" scoped>
.UnionList {
  padding: 20px;
  h3 {
    margin: 0 0;
    display: flex;
    align-items: center;
    .tag {
      display: inline-block;
      width: 5px;
      height: 18px;
      background-color: #7b94d8;
      margin-right: 10px;
    }
  }
  .searchBox {
    display: flex;
    align-items: center;
    margin: 20px 0;
    .margin {
      margin: 0 10px;
    }
    .txt {
      display: inline-block;
      height: 32px;
      background-color: #f5f7fa;
      line-height: 32px;
      padding-left: 10px;
      color: #9d9399;
      border-radius: 4px 0 0 4px;
      border: 1px solid #dcdfe6;
      border-right: none;
    }
    /deep/ .el-input__inner {
      border-radius: 0 4px 4px 0 !important;
    }
    .el-input {
      width: 200px;
    }
  }
  .typeBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .plcz {
    margin-left: 0 !important;
  }
}
</style>